<template>
  <div
    class="window"
    :id="`window-${app.appId}`"
    ref="win"
    v-if="visible"
    v-show="app.open && !app.min"
    v-drag
    :style="{
      width: app.max ? 'inherit' : `${app.width}px`,
      height: app.max ? 'calc(100vh - 71px)' : `${app.height}px`,

      zIndex: app.appId === activeAppId ? `${currentZIndex}` : app.zIndex
    }"
    :class="{
      max: app.max,
      normal: !app.max
    }"
    @mousedown="focus"
  >
    <topbar
      :title="app.title"
      @close="closeApp(app.appId)"
      @min="minApp(app.appId)"
      @max="toggle(app)"
    />

    <div class="drag" v-resize="app"></div>
    <window-body class="body">
      <slot></slot>
    </window-body>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex"
import Topbar from "./Topbar.vue"
import WindowBody from "./WindowBody.vue"

export default {
  components: { Topbar, WindowBody },
  computed: {
    ...mapState(["activeAppId", "currentZIndex"])
  },
  props: {
    visible: {
      type: Boolean,
      defalut: false
    },
    app: {
      type: Object,
      rquired: true,
      default: () => {}
    }
  },
  directives: {
    drag(el) {
      //这个el就绑定到drag上

      const start = new Date().getTime()
      el.onmousedown = function (e) {
        var disx = e.clientX - el.offsetLeft
        var disy = e.clientY - el.offsetTop
        // console.log(e.target)
        // console.log(e.target.className)
        const className = e.target.className
        if (["window-body body", "bar", "title"].includes(className)) {
          document.onmousemove = function (e) {
            const end = new Date().getTime()
            if (end - start > 100) {
              el.style.left = e.clientX - disx + "px"
              el.style.top = e.clientY - disy + "px"
            }
          }
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null
          }
        }
      }
    },

    resize(el, { value }) {
      setTimeout(() => {
        const win = document.querySelector(`#window-${value.appId}`)
        //
        function getDirect(disX, disY, position) {
          let direct
          let horizenDirect
          let verticalDirect
          const { left, right, top, bottom } = position
          if (disX <= left) {
            horizenDirect = "left"
          } else if (disX >= right) {
            horizenDirect = "right"
          }

          if (disY <= top) {
            verticalDirect = "top"
          } else if (disY >= bottom) {
            verticalDirect = "bottom"
          }

          if (verticalDirect == "top" && horizenDirect == "left") {
            direct = "left-top"
          } else if (verticalDirect === "top" && horizenDirect === "right") {
            direct = "right-top"
          } else if (verticalDirect === "bottom" && horizenDirect === "left") {
            direct = "left-bottom"
          } else if (verticalDirect === "bottom" && horizenDirect == "right") {
            direct = "right-bottom"
          } else if (verticalDirect) {
            direct = verticalDirect
          } else if (horizenDirect) {
            direct = horizenDirect
          }
          return direct
        }

        function updateCursor(direct) {
          switch (direct) {
            case "left":
              el.style.cursor = "w-resize"
              break
            case "right":
              el.style.cursor = "e-resize"
              break
            case "bottom":
              el.style.cursor = "s-resize"
              break
            case "top":
              el.style.cursor = "n-resize"
              break
            case "right-bottom":
              el.style.cursor = "se-resize"
              break
            case "left-bottom":
              el.style.cursor = "sw-resize"
              break
            case "right-top":
              el.style.cursor = "ne-resize"
              break
            case "left-top":
              el.style.cursor = "nw-resize"
              break
            default:
              el.style.cursor = "auto"
          }
        }
        el.onmouseenter = function (e) {
          e.stopPropagation()
          const disX = e.clientX // 获取鼠标按下时光标x的值
          const disY = e.clientY // 获取鼠标按下时光标Y的值
          const position = win.getBoundingClientRect() //父级元素坐标
          const direct = getDirect(disX, disY, position) //获取方向
          updateCursor(direct)
        }

        //宽高限制
        const limit = {
          w: 200,
          h: 200
        }

        el.onmousedown = function (e) {
          e.stopPropagation()

          const disX = e.clientX // 获取鼠标按下时光标x的值
          const disY = e.clientY // 获取鼠标按下时光标Y的值
          const disW = win.offsetWidth // 获取拖拽前div的宽
          const disH = win.offsetHeight // 获取拖拽前div的高

          const position = win.getBoundingClientRect() //父级元素坐标
          const direct = getDirect(disX, disY, position) //获取方向
          updateCursor(direct) //更新鼠标指针

          document.onmousemove = (d) => {
            d.stopPropagation()
            let w, h
            let x, y
            switch (direct) {
              case "left":
                w = disX - d.clientX + disW
                w = w < limit.w ? limit.w : w //宽度限制
                h = disH
                x = position.left + d.clientX - disX //左侧移动
                break
              case "right":
                w = d.clientX - disX + disW
                w = w < limit.w ? limit.w : w //宽度限制
                h = disH
                break
              case "bottom":
                w = disW
                h = d.clientY - disY + disH
                break
              case "top":
                w = disW
                h = disY - d.clientY + disH
                h = h < limit.h ? limit.h : h //高度限制
                y = position.top + d.clientY - disY
                break

              case "left-top":
                x = position.left + d.clientX - disX
                y = position.top + d.clientY - disY
                w = disX - d.clientX + disW
                h = disY - d.clientY + disH
                w = w < limit.w ? limit.w : w //宽度限制
                h = h < limit.h ? limit.h : h //高度限制
                break
              case "left-bottom":
                x = position.left + d.clientX - disX //左侧移动
                w = disX - d.clientX + disW
                h = d.clientY - disY + disH
                w = w < limit.w ? limit.w : w //宽度限制

                break
              case "right-top":
                w = d.clientX - disX + disW
                h = disY - d.clientY + disH
                y = position.top + d.clientY - disY
                w = w < limit.w ? limit.w : w //宽度限制
                h = h < limit.h ? limit.h : h //高度限制
                break
              case "right-bottom":
                w = d.clientX - disX + disW
                h = d.clientY - disY + disH
                w = w < limit.w ? limit.w : w //宽度限制
                h = h < limit.h ? limit.h : h //高度限制
                break
            }

            win.style.width = w + "px" // 拖拽后物体的宽
            win.style.height = h + "px" // 拖拽后物体的高
            if (x) {
              win.style.left = x + "px"
            }
            if (y) {
              win.style.top = y + "px"
            }
          }
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
            win.style.cursor = "auto"
          }
        }
      }, 0)
    }
  },

  methods: {
    ...mapActions(["closeApp", "minApp", "toggleMaxApp", "setCurrentASpp"]),

    focus() {
      this.setCurrentASpp(this.app.appId)
    },
    toggle(app) {
      this.toggleMaxApp({
        appId: app.appId,
        isMax: app.max
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      const win = this.$refs.win
      if (win) {
        const disW = win.offsetWidth // 获取拖拽前div的宽
        const disH = win.offsetHeight // 获取拖拽前div的高
        const left = (window.innerWidth - disW) / 2
        const top = (window.innerHeight - disH) / 2

        win.style.left = left + "px"
        win.style.top = top + "px"
      }
    })
  }
}
</script>

<style lang="less" scoped>
.drag {
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  top: -10px;
  // background: blue;
  z-index: 1;
  // cursor: ns-resize;
  // &:hover {
  //   cursor: resize;
  // }
}
@import "../../global/style/var.less";
.window {
  position: fixed;
  margin: 3px;

  .body {
    position: absolute;
    z-index: 10;
    top: 32px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  &.max {
    top: 0 !important;
    left: 0 !important;
    transition: all 0.2s;
    transform: none;
  }
  &.normal {
    left: 50%;
    top: 50%;
  }

  border-radius: 10px;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 50px @-window-border-color;
  border: solid 1px @-window-border-color;
}
</style>
